<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:model="queryData"
				label-width="120px"
				label-suffix=":"
				:inline="true"
			>
				<el-form-item :label="`${$t('dxn.card_ables_list.table_id')}`">
					<el-input
						v-model.trim="queryData.tableCode"
						v-input="{ name: 'symbols' }"
						clearable
						style="width: 230px"
						:placeholder="`${$t('common.please_enter')}`"
					></el-input>
				</el-form-item>

				<el-form-item :label="`${$t('dxn.card_ables_list.game_name')}`">
					<el-select
						v-model="queryData.tableTypeList"
						clearable
						:placeholder="$t('common.select_all')"
						multiple
						style="width:220px"
					>
						<el-option
							v-for="item in gameType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="模式">
					<el-select
						v-model="queryData.squidModelList"
						clearable
						:placeholder="$t('common.select_all')"
						multiple
						style="width:220px"
					>
						<el-option
							v-for="item in squidModels"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="结算方式">
					<el-select
						v-model="queryData.settleTypeList"
						clearable
						:placeholder="$t('common.select_all')"
						multiple
						style="width:220px"
					>
						<el-option
							v-for="item in squidSettleTypes"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="会员账号">
					<el-input
						v-model.trim="queryData.userName"
						v-input="{ name: 'noEmpty' }"
						clearable
						style="width: 160px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item label="鱿鱼开始手牌ID" label-width="120px">
					<el-input
						v-model.trim="queryData.beginHandCode"
						v-input="{ name: 'noEmpty' }"
						clearable
						style="width: 230px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item label="鱿鱼结算手牌ID" label-width="120px">
					<el-input
						v-model.trim="queryData.settleHandCode"
						v-input="{ name: 'noEmpty' }"
						clearable
						style="width: 230px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item label="鱿鱼奖励值">
					<el-input
						v-model="queryData.squidRewardPriceFrom"
						size="medium"
						:placeholder="$t('common.minimum')"
						style="width: 130px"
						maxLength="10"
						v-input="{ name: 'onlyTwoNum' }"
						name="squidRewardPriceFrom"
						clearable
						@blur="
							handleAmount(
								queryData,
								1,
								'squidRewardPriceFrom',
								'squidRewardPriceTo',
								$t('member.check_min_tips')
							)
						"
					></el-input>
					-
					<el-input
						v-model="queryData.squidRewardPriceTo"
						size="medium"
						:placeholder="$t('common.maximum')"
						style="width: 130px"
						maxLength="10"
						v-input="{ name: 'onlyTwoNum' }"
						name="squidRewardPriceTo"
						clearable
						@blur="
							handleAmount(
								queryData,
								2,
								'squidRewardPriceFrom',
								'squidRewardPriceTo',
								$t('member.check_max_tips')
							)
						"
					></el-input>
				</el-form-item>
				<el-form-item label="鱿鱼总奖励">
					<el-input
						v-model="queryData.squidRewardAmountFrom"
						size="medium"
						:placeholder="$t('common.minimum')"
						style="width: 130px"
						maxLength="10"
						v-input="{ name: 'onlyTwoNum' }"
						name="squidRewardAmountFrom"
						clearable
						@blur="
							handleAmount(
								queryData,
								1,
								'squidRewardAmountFrom',
								'squidRewardAmountTo',
								$t('member.check_min_tips')
							)
						"
					></el-input>
					-
					<el-input
						v-model="queryData.squidRewardAmountTo"
						size="medium"
						:placeholder="$t('common.maximum')"
						style="width: 130px"
						maxLength="10"
						v-input="{ name: 'onlyTwoNum' }"
						name="squidRewardAmountTo"
						clearable
						@blur="
							handleAmount(
								queryData,
								2,
								'squidRewardAmountFrom',
								'squidRewardAmountTo',
								$t('member.check_max_tips')
							)
						"
					></el-input>
				</el-form-item>
				<el-form-item label="鱿鱼时间">
					<el-date-picker
						:clearable="false"
						v-model="searchTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						value-format="timestamp"
						style="width: 430px"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90750105')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="exportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
					<el-button
						v-if="hasPermission('90870096')"
						type="success"
						icon="el-icon-sort"
						size="medium"
						@click="showColumnSet"
					>
						{{ $t('common.row_set') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				ref="refTable"
				@current-change="handleSelectRowHighlight"
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="dataList"
				style="width: 100%;"
				:max-height="tableHeight"
				highlight-current-row
				header-align="center"
				:header-cell-style="getRowClass"
				@sort-change="handleTableSort"
				show-summary
				:summary-method="
					(val) => handleRow(val, subSummary, totalSummary)
				"
			>
				<el-table-column
					type="index"
					label="序号"
					width="120"
					align="center"
				/>
				<el-table-column
					align="center"
					label="会员账号"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.userNames || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="会员昵称"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.nickNames || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.squidModel]"
					align="center"
					label="模式"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.squidModelName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.mostSquidWinsSwitch]"
					align="center"
					label="鱿鱼独赢"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							scope.row.mostSquidWinsSwitch === 2
								? '开启'
								: '未开启'
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[tableColumns.capotSquidNumberLowerLimit]
					"
					align="center"
					label="鱿鱼独赢下限"
					min-width="135"
					show-overflow-tooltip
					prop="capotSquidNumberLowerLimit"
				>
					<template slot-scope="scope">
						{{
							scope.row.mostSquidWinsSwitch === 2
								? scope.row.capotSquidNumberLowerLimit
								: '-'
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.squidRewardValue]"
					align="center"
					label="鱿鱼倍数"
					min-width="100"
					show-overflow-tooltip
					prop="squidRewardValue"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ scope.row.squidRewardValue }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.squidRewardPrice]"
					align="center"
					label="鱿鱼奖励值"
					min-width="120"
					show-overflow-tooltip
					prop="squidRewardPrice"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.squidRewardPrice
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.round]"
					align="center"
					label="鱿鱼轮次"
					min-width="100"
					show-overflow-tooltip
					prop="round"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ scope.row.round }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.squidNumber]"
					align="center"
					label="鱿鱼总数"
					min-width="100"
					show-overflow-tooltip
					prop="squidNumber"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ scope.row.squidNumber }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.validSquidNumberTotal]"
					:key="columnSetKey"
					align="center"
					min-width="160"
					show-overflow-tooltip
					prop="validSquidNumberTotal"
				>
					<template #header>
						<span>
							有效鱿鱼总数
							<el-popover
								placement="top-start"
								width="auto"
								trigger="hover"
							>
								<div>有效鱿鱼数是实际计算鱿鱼输赢的数量</div>
								<div>
									普通鱿鱼时，玩家有鱿鱼时，无论几条仅计算为鱿鱼数1条
								</div>
								<div>无限鱿鱼时，有效鱿鱼数等于玩家鱿鱼数</div>
								<div>
									无限鱿鱼且开独赢时，有效鱿鱼数等于玩家鱿鱼数
									+ 所有玩家放弃鱿鱼数
								</div>
								<div>
									有玩家认输时，场上没有鱿鱼的玩家会获得1条有效鱿鱼
								</div>
								<span slot="reference">
									<i class="el-icon-question"></i>
								</span>
							</el-popover>
						</span>
					</template>
					<template slot-scope="scope">
						{{ scope.row.validSquidNumberTotal }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.settleType]"
					align="center"
					label="结算方式"
					min-width="150"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.settleTypeName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.squidSettleList]"
					align="center"
					label="鱿鱼结算信息"
					min-width="160"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.squidSettleList || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.tableCode]"
					label="牌桌ID"
					min-width="190"
					align="center"
					prop="tableCode"
				>
					<template slot-scope="scope">
						<div
							class="text-link"
							@click="
								$router.push({
									path:
										'/dxn/gameManager/cardTablesList/cardTablesBase',
									query: {
										tableId: scope.row.tableCode
									}
								})
							"
						>
							{{ scope.row.tableCode }}
						</div>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.tableName]"
					align="center"
					label="牌桌名称"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.tableName }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.clubId]"
					label="牌桌所属俱乐部ID"
					min-width="125"
					align="center"
				>
					<template slot-scope="scope">
						<div
							v-if="scope.row.clubId"
							class="text-link"
							@click="
								$router.push({
									path: '/dxn/clubManager/clubList',
									query: {
										clubId: scope.row.clubId
									}
								})
							"
						>
							{{ scope.row.clubId }}
						</div>
						<div v-else>-</div>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.tableType]"
					align="center"
					label="游戏名称"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ typeFilter(scope.row.tableType, 'gameType') }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.bbBlindScore]"
					label="盲注"
					min-width="150"
					align="center"
					prop="bbBlindScore"
					sortable="custom"
				>
					<template slot-scope="scope">
						<ShowBlindInjection
							:tableType="scope.row.tableType"
							:bbBlindScore="scope.row.bbBlindScore"
							:sbBlindScore="scope.row.sbBlindScore"
							:anteSwitch="scope.row.anteSwitch"
							:anteScore="scope.row.anteScore"
							:straddleAmount="scope.row.straddleAmount"
						/>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.beginHandCode]"
					align="center"
					label="鱿鱼开始手牌ID"
					min-width="190"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.beginHandCode || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.beginHandNum]"
					align="center"
					label="鱿鱼开始手牌号"
					min-width="140"
					show-overflow-tooltip
					prop="beginHandNum"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ scope.row.beginHandNum }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.handBeginTimeStr]"
					align="center"
					label="鱿鱼开始时间"
					min-width="160"
					show-overflow-tooltip
					prop="handBeginTimeStr"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ scope.row.handBeginTimeStr || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.settleHandCode]"
					align="center"
					label="鱿鱼结算手牌ID"
					min-width="190"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.settleHandCode || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.settleHandNum]"
					align="center"
					label="鱿鱼结算手牌号"
					min-width="140"
					show-overflow-tooltip
					prop="settleHandNum"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ scope.row.settleHandNum || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.handEndTimeStr]"
					align="center"
					label="鱿鱼结算时间"
					min-width="160"
					show-overflow-tooltip
					prop="settleTimeStr"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ scope.row.settleTimeStr || '-' }}
					</template>
				</el-table-column>

				<el-table-column
					v-if="tableColumnData[tableColumns.squidRewardAmount]"
					align="center"
					label="鱿鱼总奖励"
					min-width="160"
					show-overflow-tooltip
					prop="squidRewardAmount"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.squidRewardAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.squidCompensationAmount]"
					align="center"
					label="鱿鱼总支付"
					min-width="160"
					show-overflow-tooltip
					prop="squidCompensationAmount"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.squidCompensationAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.squidWalletPay]"
					align="center"
					label="鱿鱼钱包支付"
					min-width="160"
					show-overflow-tooltip
					prop="squidWalletPay"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.squidWalletPay
							)
						}}
					</template>
				</el-table-column>

				<el-table-column
					align="center"
					:label="$t('common.actions')"
					min-width="120"
					fixed="right"
				>
					<template slot-scope="scope">
						<div
							v-if="hasPermission('90750103')"
							class="text-link"
							@click="
								$router.push({
									path: '/dxn/squidManager/squidDetail',
									query: {
										tableCode: scope.row.tableCode,
										round: scope.row.round
									}
								})
							"
						>
							鱿鱼详情
						</div>
						<span v-else>-</span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-if="total"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:current-page.sync="pageNum"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			/>
		</template>
		<TableColumnSet
			v-if="colSettings.visible"
			:visible.sync="colSettings.visible"
			:dialogColumnData="dialogColumnData"
			:activityListField="activityListField"
			@submitColumnSet="submitColumnSet"
			@choiceColumnSet="choiceColumnSet"
		></TableColumnSet>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import MainContent from '@/components/MainContent/index.vue'
import { routerNames } from '@/utils/consts'
import summaryList from './components/summaryList'
import ShowBlindInjection from '@/components/Dxn/ShowBlindInjection'
import tableScroll from '@/utils/tableScroll'
import { squidModels, squidSettleTypes } from '@/dict/dxn'
import { tableColumns } from '@/views/dxn/squidManager/components/tableColumn'
import TableColumnSet from '@/components/Dxn/TableColumnSet'
import dxnMixin from '@/mixins/dxnMixin'

const start = () =>
	dayjs()
		.startOf('day')
		.subtract(6, 'day')
const end = () => dayjs().endOf('day')
export default {
	name: routerNames.squidList,
	components: {
		TableColumnSet,
		MainContent,
		ShowBlindInjection
	},
	mixins: [list, summaryList, tableScroll, dxnMixin],
	data() {
		return {
			dataList: [],
			subSummary: {},
			totalSummary: {},
			loading: false,
			exportBtnLoading: false,
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				tableCode: undefined,
				tableTypeList: [],
				squidModelList: [],
				settleTypeList: [],
				userName: undefined,
				beginHandCode: undefined,
				settleHandCode: undefined,
				squidRewardPriceFrom: undefined,
				squidRewardPriceTo: undefined,
				squidRewardAmountFrom: undefined,
				squidRewardAmountTo: undefined
			},
			searchTime: [start(), end()],
			colSettings: {
				visible: false,
				dialogColumnData: {}
			},
			tableColumns,
			squidModels,
			squidSettleTypes
		}
	},
	computed: {
		gameType() {
			return this.globalDics.gameType || []
		}
	},
	watch: {
		$route: function(to, from) {
			if (to.path.indexOf(routerNames.squidList) > -1) {
				this.getRouteQuery(true)
			}
		}
	},
	created() {
		this.initIndexDB('squidList', this.activityListField)
		this.getRouteQuery()
	},
	methods: {
		// 请求
		getRouteQuery(isLoadData = false) {
			if (this.$route.query.tableCode) {
				this.resetQueryData()
				this.searchTime = [start(), end()]
				this.queryData.tableCode = this.$route.query.tableCode || ''
				this.$router.replace({ query: {} })
				if (isLoadData) {
					this.loadData()
				}
			}
		},
		getSearchParam() {
			const searchTime = this.searchTime || []
			const params = {
				...this.queryData,
				handBeginTimeFrom: searchTime[0]
					? dayjs(searchTime[0]).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				handBeginTimeTo: searchTime[1]
					? dayjs(searchTime[1]).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			if (!params.tableTypeList?.length) {
				params.tableTypeList = undefined
			}
			if (!params.squidModelList?.length) {
				params.squidModelList = undefined
			}
			if (!params.settleTypeList?.length) {
				params.settleTypeList = undefined
			}
			if (isNaN(params?.squidRewardPriceFrom)) {
				params.squidRewardPriceFrom = undefined
			}
			if (isNaN(params?.squidRewardPriceTo)) {
				params.squidRewardPriceTo = undefined
			}
			if (isNaN(params?.squidRewardAmountFrom)) {
				params.squidRewardAmountFrom = undefined
			}
			if (isNaN(params?.squidRewardAmountTo)) {
				params.squidRewardAmountTo = undefined
			}
			return params
		},
		loadData() {
			this.loading = true
			this.dataList = []
			this.subSummary = {}
			this.totalSummary = {}
			const params = this.getParams(this.getSearchParam())
			this.$api
				.getSquidListBend(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.dataList = res?.data?.record
						this.total = res?.data?.totalRecord
						const summary = res?.data?.summary || []
						this.subSummary = summary[0] || {}
						this.totalSummary = summary[1] || {}
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		search() {
			this.clearTableSort()
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			this.resetQueryData()
			this.pageNum = 1
			this.searchTime = [start(), end()]
			this.loadData()
		},
		exportExcel() {
			const params = this.getParams(this.getSearchParam())
			this.deleteExportParams(params)
			this.exportBtnLoading = true
			this.exportExcelPublic({
				api: 'exportSquidListBend',
				params
			}).finally(() => {
				this.exportBtnLoading = false
			})
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
::v-deep .el-icon-question:after {
	font-size: 14px;
	margin-left: -2px;
}
</style>
